<template>
  <div>
    <ul class="tool-box" id="toolBox">
      <template v-for="item in toolList">
        <!-- 属性查看功能气泡弹框 -->
        <el-tooltip v-if="item.funcInvokeUrl == 'AttributeEnquiry'" popper-class="attr-tooltip" placement="right" effect="light">
          <!-- 控制切换 -->
          <div 
            id="attrPop"
            class="pop-box"
            ref="attrPop"
            slot="content"
          >
            <div class="attr-content">
              <span class="switch-title">构件属性：</span>
              <el-switch
                @change="(checked) => handleChange(checked, 'base',item)"
                v-model="base"
              />
            </div>
            <!-- <div>
              <span class="switch-title">项目信息：</span>
              <el-switch
                @change="(checked) => handleChange(checked, 'custom',item)"
                v-model="custom"
              />
            </div> -->
          </div>
          <li key="item.id"  ref="AttributeEnquiry" :class="{ t_active: item.visiable }">
            <i class="icon" :class="item.iconClass"></i>
            <p>{{ item.name }}</p>
          </li>
        </el-tooltip>
        <li :key="item.id"  v-else :ref="item.funcInvokeUrl" @click="changeToolState(item)" :class="{ t_active: item.visiable }">
          <i class="icon" :class="item.iconClass"></i>
          <p>{{ item.name }}</p>
        </li>
      </template>
      
    </ul>
  </div>
</template>
<script>
  export default {
    props: {
      toolList: {
        type: Array
      },
    },
    data() {
      return {
        base: false,
        custom: false,
        attributeType: '', //属性当前选中的radio
      };
    },
    mounted() {
      for (let item of this.toolList) {
        if (item.name == "视点演示") {
          item.visiable = true;
        }
      }
      let arr = [];// ['AttributeEnquiry', 'LayerTreeMini']; //默认开启的工具-微件名
      this.setDefaultTool(arr);
    },
    computed: {
      isEmbedAgcloud() {
        return CIM_PROJECT_CONFIG.isEmbedAgcloud;
      },
    },
    methods: {
      //切换属性查看中的switch
      handleChange(checked, name,o) {
        this.base = false;
        this.custom = false;
        this[name] = checked;
        if (checked) {
          this.attributeType = name;
          this.$store.state.attrRadio = name;
          if(!o.visiable){
          this.$set(o, "visiable", true);
          this.$emit("changeToolState", o);
          }
        } else {
          this.attributeType = '';
          this.$store.state.attrRadio = '';
          this.$set(o, "visiable", false);
          this.$emit("changeToolState", o);
        }
      },
      setDefaultTool(arr) {
        for (let i = 0; i < this.toolList.length; i++) {
          for (let j = 0; j < arr.length; j++) {
            if (this.toolList[i].funcInvokeUrl == arr[j]) {
              this.changeToolState(this.toolList[i]);
            }
          }
        }
      },
      changeToolState(o) {
        this.$set(o, "visiable", !o.visiable);
        this.$emit("changeToolState", o);
      },

    },
  };
</script>
<style lang="less">
  .tool-box {
    display: flex;
    width: 356px;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    padding: 10px;
    margin: 0;

    >li {
      width: 21.43%;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      height: 72px;
      line-height: 30px;
      text-align: center;
      margin-bottom: 16px;
      cursor: pointer;

      >.icon {
        display: inline-block;
        width: 24px;
        height: auto;
        margin-top: 12px;
        font-size: 24px;
        color: #ffffff;
        opacity: 0.6;
      }

      >p {
        height: 20px;
        line-height: 20px;
        color: #ffffff;
        opacity: 0.6;
      }
    }

    li.t_active {
      background: #1e90ff;
      color: #ffffff;

      >.icon {
        color: #ffffff;
        opacity: 1;
      }

      >p {
        color: #ffffff;
        opacity: 1;
      }
    }

  }

  /* 如果最后一行是3个元素 */
  .tool-box li:last-child:nth-child(4n - 1) {
    margin-right: calc(21.43% + 14.28% / 3);
  }

  /* 如果最后一行是2个元素 */
  .tool-box li:last-child:nth-child(4n - 2) {
    margin-right: calc(42.86% + 28.56% / 3);
  }

  .icon-above {
    background: url("./img/list/sys-above.png") no-repeat center;
    background-size: 100%;
  }

  .icon-area {
    background: url("./img/list/sys-area.png") no-repeat center;
    background-size: 100%;
  }

  .icon-camera {
    background: url("./img/list/sys-camera.png") no-repeat center;
    background-size: 100%;
  }

  .icon-coor {
    background: url("./img/list/sys-coor.png") no-repeat center;
    background-size: 100%;
  }

  .icon-distance {
    background: url("./img/list/sys-distance.png") no-repeat center;
    background-size: 100%;
  }

  .icon-linked {
    background: url("./img/list/sys-linked.png") no-repeat center;
    background-size: 100%;
  }

  .icon-property {
    background: url("./img/list/sys-property.png") no-repeat center;
    background-size: 100%;
  }

  .icon-slice {
    background: url("./img/list/sys-slice.png") no-repeat center;
    background-size: 100%;
  }

  .icon-slicebox {
    background: url("./img/list/sys-box.png") no-repeat center;
    background-size: 100%;
  }

  .icon-sun {
    background: url("./img/list/sys-sun.png") no-repeat center;
    background-size: 100%;
  }

  .icon-positon {
    background: url("./img/list/sys-positon.png") no-repeat center;
    background-size: 100%;
  }

  .icon-hawkeye {
    background: url("./img/list/sys-hawkeye.png") no-repeat center;
    background-size: 100%;
  }

  .icon-label {
    background: url("./img/list/sys-label.png") no-repeat center;
    background-size: 100%;
  }

  .icon-flatten {
    background: url("./img/list/sys-flatten.png") no-repeat center;
    background-size: 100%;
  }

  .icon-terrain {
    background: url("./img/list/sys-terrain.png") no-repeat center;
    background-size: 100%;
  }

  .icon-bloom {
    background: url("./img/list/sys-bloom.png") no-repeat center;
    background-size: 100%;
  }

  .icon-sys-weather {
    background: url("./img/list/sys-weather.png") no-repeat center;
    background-size: 100%;
  }

  .icon-sys-firstview {
    background: url("./img/list/sys-firstview.png") no-repeat center;
    background-size: 100%;
  }

  .icon-sys-handyroam {
    background: url("./img/list/sys-handyroam.png") no-repeat center;
    background-size: 100%;
  }

  .icon-sys-linkage {
    background: url("./img/list/sys-linkage.png") no-repeat center;
    background-size: 100%;
  }

  .icon-sys-roam {
    background: url("./img/list/sys-roam.png") no-repeat center;
    background-size: 100%;
  }

  .icon-underground {
    background: url(./img/underground.webp) no-repeat;
    background-size: 100%;
  }

  .icon-attr {
    background: url(./img/attr.webp) no-repeat;
    background-size: 100%;
  }

  .icon-clip {
    background: url(./img/clip.webp) no-repeat;
    background-size: 100%;
  }

  .icon-sunshine {
    background: url(./img/sunshine.webp) no-repeat;
    background-size: 100%;
  }

  .icon-location {
    background: url(./img/location.webp) no-repeat;
    background-size: 100%;
  }

  .icon-measure {
    background: url(./img/measure.webp) no-repeat;
    background-size: 100%;
  }

  .icon-eagleEye {
    background: url(./img/eagleEye.webp) no-repeat;
    background-size: 100%;
  }

  .icon-terrain {
    background: url(./img/terrain.webp) no-repeat;
    background-size: 100%;
  }

  .icon-weather {
    background: url(./img/weather.webp) no-repeat;
    background-size: 100%;
  }

  .icon-first {
    background: url(./img/first.webp) no-repeat;
    background-size: 100%;
  }

  .icon-clipbox {
    background: url(./img/clipbox.webp) no-repeat;
    background-size: 100%;
  }

  .icon-mapset {
    background: url(./img/mapset.webp) no-repeat;
    background-size: 100%;
  }

  .icon-AI {
    background: url(./img/AI.png) no-repeat;
    background-size: 100%;
  }
</style>